<template>
	<view>
		<!-- 携程费用报销 -->
		<view class="head_tb">
			<u-tabs :activeStyle="{
						 fontSize:'32rpx',
						 color: '#007aff'
			         }" :inactiveStyle="{
						 fontSize:'30rpx'
			         }" :scrollable='false' :lineWidth='30' itemStyle='height:90rpx;padding:0 0' :list="list1"
				@click="checkbtn"></u-tabs>
		</view>
		<!-- 基本信息 -->
		<view class="msp">
			<CellChild :addlist='addlist' :rows='rows' :fileNo = 'fileNo' title='基本信息' isshow='true' id='add_one'>
				<template #fj>
					<view class="bod_cost">
						<view class="bus" style="color: #333333;">
							<span>月份</span>
						</view>
						<p style='color: rgb(19,140,222);'>
							<el-dropdown @command="handleCommand">
							  <span class="el-dropdown-link">
							    {{oumoe}}<i class="el-icon-arrow-down el-icon--right"></i>
							  </span>
							  <el-dropdown-menu slot="dropdown">
							    <el-dropdown-item command="01">1月</el-dropdown-item>
							    <el-dropdown-item command="02">2月</el-dropdown-item>
							    <el-dropdown-item command="03">3月</el-dropdown-item>
								<el-dropdown-item command="04">4月</el-dropdown-item>
								<el-dropdown-item command="05">5月</el-dropdown-item>
								<el-dropdown-item command="06">6月</el-dropdown-item>
								<el-dropdown-item command="07">7月</el-dropdown-item>
								<el-dropdown-item command="08">8月</el-dropdown-item>
								<el-dropdown-item command="09">9月</el-dropdown-item>
								<el-dropdown-item command="10">10月</el-dropdown-item>
								<el-dropdown-item command="11">11月</el-dropdown-item>
								<el-dropdown-item command="12">12月</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown>
						</p>
					</view>
					
					
				</template>
			</CellChild>
		</view>
		
		<!-- 收款信息 -->
		<view class="formcard" id="add_two">
			<view class="bodtitle">
				<p><b>收款信息</b></p>
			</view>
			
			<view v-for="(item,index) in customerEntityList" :key='index'>
				<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='celllist' :title='item.customerNm'></Expandlist>
			</view>
		</view>
		
		
		<!-- 费用明细 -->
		<view class="formcard" id="add_three">
			<view class="bodtitle">
				<p><b>费用明细</b></p>
			</view>
			
			<view v-for="(item,index) in reimCtripCostEntities" :key='index'>
				<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='celllist2' :title='item.deptNm'>
					<template #list>
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='passenger' title='机票费'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.flyTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.fiyTickets)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.flyTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>改签费</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.flyChangeAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.flyCount}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>未匹配金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.unApplyFiyAmt)}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='railway' title='火车票'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.trainTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.trainTickets)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.trainTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.trainCount}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>未匹配金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.unApplyTrainAmt)}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='wineshop' title='酒店费'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.hotelTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.hotelAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.hotelTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.hotelCount}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>未匹配金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.unApplyHotelAmt)}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='carlist' title='网约车费'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" >{{commonApi.formatAmt(item.carTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.carAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.carTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.carCount}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>未匹配金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.unApplyCarAmt)}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='service' title='服务费'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.serveTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.serveAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.refundTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.refundCount}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='tpflist' title='退票费'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.refundTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.serveAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.refundTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.refundCount}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>未匹配金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.unApplyHotelAmt)}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='qtlist' title='其他费用'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.otherTotalAmt)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.otherAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.otherTax)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>张数</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{item.otherCount}}</p>
								</view>
							</template>
						</Expandlist>
						
						<Expandlist :cellshows='cellshow' :arrcell = 'item'  :celllist='cwlist' title='财务审核金额'>
							<template #text>
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">{{commonApi.formatAmt(item.auditAmt+item.auditTax)}}</span></p>
							</template>
							<template #list>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>不含税金额</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.auditAmt)}}</p>
								</view>
								<view class="bod_cost"
									style="background-color: #f7fbff;border: 1px solid white;">
									<view class="bus">
										<p style='color: #666666'>税金</p>
									</view>
									<p class='bodcolors' style='word-break:break-all ; '>{{commonApi.formatAmt(item.auditTax)}}</p>
								</view>
							</template>
						</Expandlist>
					</template>
				</Expandlist>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				list1: [{
						name: '基本信息',
					},
					{
						name: '收款信息'
					},
					{
						name: '费用明细'
					},
				],
				cellshow:false,
				addlist: [{
						tit: '报销单号',
						val: 'reimCtripNo'
					},
					{
						tit: '报销人',
						val: 'empNm'
					},
					{
						tit: '报销预算月份',
						val: 'reimMonth'
					},
					{
						tit: '合计付款',
						val: 'payTotal',
						type:'number'
					},
					{
						tit: '说明事项',
						val: 'reasons'
					},
					{
						tit: '资金支付计划付款',
						val: 'isPayPlan'
					},
				],
				celllist:[
					{tit:'收款方',val:'customerNm'},
					{tit:'收款方开户银行',val:'bank'},
					{tit:'收款方开户账号',val:'bankAccount'},
				],
				celllist2:[
					{tit:'备注',val:'remark'},
				],
				passenger:[
					// {tit:'不含税金额',val:'fiyTickets',type:'number'},
					// {tit:'税金',val:'flyTax',type:'number'},
					// {tit:'改签费',val:'flyChangeAmt',type:'number'},
					// {tit:'张数',val:'flyCount'},
					// {tit:'未匹配金额',val:'unApplyFiyAmt',type:'number'},
				],//机票
				railway:[
					// {tit:'不含税金额',val:'trainTickets',type:'number'},
					// {tit:'税金',val:'trainTax',type:'number'},
					// {tit:'张数',val:'trainCount'},
					// {tit:'未匹配金额',val:'unApplyTrainAmt',type:'number'},
				],//火车票
				wineshop:[
					// {tit:'不含税金额',val:'hotelAmt',type:'number'},
					// {tit:'税金',val:'hotelTax',type:'number'},
					// {tit:'张数',val:'hotelCount'},
					// {tit:'未匹配金额',val:'unApplyHotelAmt',type:'number'},
				],//酒店费
				carlist:[
					// {tit:'不含税金额',val:'carAmt',type:'number'},
					// {tit:'税金',val:'carTax',type:'number'},
					// {tit:'张数',val:'carCount'},
					// {tit:'未匹配金额',val:'unApplyCarAmt',type:'number'},
				],//网约车费
				service:[
					// {tit:'不含税金额',val:'serveAmt',type:'number'},
					// {tit:'税金',val:'serveTax',type:'number'},
					// {tit:'张数',val:'serveCount'},
					// {tit:'未匹配金额',val:''},
				],//服务费
				tpflist:[
					// {tit:'不含税金额',val:'serveAmt',type:'number'},
					// {tit:'税金',val:'refundTax',type:'number'},
					// {tit:'张数',val:'refundCount'},
					// {tit:'未匹配金额',val:''},
				],//退票费
				qtlist:[
					// {tit:'不含税金额',val:'otherAmt',type:'number'},
					// {tit:'税金',val:'otherTax',type:'number'},
					// {tit:'张数',val:'otherCount'},
				],//其他费用
				cwlist:[
					// {tit:'不含税金额',val:'auditAmt',type:'number'},
					// {tit:'税金',val:'auditTax',type:'number'},	
				],//财务审核金额
				rows:[],
				customerEntityList:[], //收款方信息
				reimCtripCostEntities:[], //费用明细
				oumoe:'选择月份',
				fileNo:[]
			}
		},
		onLoad() {
			let billNo= window.parent.myvm.wfContext.BusinessKey;
			this.fileNo = window.parent.myvm.wfContext.BusinessKey;
			this.getlist(billNo)
		},
		created() {
		},
		mounted() {
			var that = this;
			window.myvm = that;
			window.$urlFormVue = that;
		},
		methods: {
			getlist(reimCtripNo){
				let _this = this
				const params ={
					reimCtripNo
				}
				_this.$lyRequest.get('/gateway/reim/mp/dbsap/reimCtripEntity/getReimCtrip.do',
					params
				).then((result)=>{
					if(result.success){
						console.log(result)
						this.rows = result.data.rows
						this.customerEntityList = result.data.rows.customerEntityList
						this.reimCtripCostEntities = result.data.rows.reimCtripCostEntities
						if(this.rows.isPayPlan == '0'){
							this.rows.isPayPlan = '否'
						}else if(this.rows.isPayPlan == '1'){
							this.rows.isPayPlan = '是'
						}
					}else{
						console.log(result.data.msg)
					}
				})
			},
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//转办-工作流点击"确认转办"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//opinion:转办意见
			referredWorkflow(opinion) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef,callback) {
				callback("");
			},
			//提交单据
			sendWorkflow(btnDef, callback) {
				callback("");
			},
			 handleCommand(command) {
			    // this.$message('click on item ' + command);
				this.oumoe = command+'月'
				let _this = this
				const params = {
					reimMonth:'2022-'+command	
				}
				_this.$lyRequest.get('/gateway/reim/mp/dbsap/reimCtripEntity/statisticsCost.do',
					params
				).then((result)=>{
					if(result.success){
						console.log(result)
						this.reimCtripCostEntities = result.data.rows.reimCtripCostEntities
						// this.rows = result.data.rows
						this.customerEntityList = result.data.rows.customerEntityList
					}else{
						console.log(result.data.msg)
					}
				})
			 },
			checkbtn(item) { //切换tabs
				if (item.index === 0) {
					this.commonApi.goAnchor('add_one')
				} else if (item.index === 1) {
					this.commonApi.goAnchor('add_two')
				} else if (item.index === 2) {
					this.commonApi.goAnchor('add_three')
				}
			},
		}
	}
</script>

<style scoped lang="scss">
view{
	font-family: pf;
}
.bodcolor{
		span{
			color:#ff6400;
			font-size: 36rpx;
			padding-right: 20rpx;
		}
		label{
			color: #ff6400;
		}
	}
	  .el-dropdown {
	    vertical-align: top;
	  }
	  .el-dropdown + .el-dropdown {
	    margin-left: 15px;
	  }
	  .el-icon-arrow-down {
	    font-size: 12px;
	  }
</style>
